<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">数据字典</h3>
				<div class="box-tools pull-right">
						<@shiro.hasPermission name="dict:add">
						<a  class="btn btn-sm btn-primary" id="addUrl" target="modal" modal="lg" href="javascript:;">添加</a>
						</@shiro.hasPermission>
				</div>
			</div>
			<div class="box-body">
                <div class="col-md-3">
                    <div class="form-group">
                        <ul id="ztree" class="ztree"></ul>
                    </div>
                </div>
                <div class="col-md-9">
				<table id="tb_tab" class="table table-bordered table-striped">
					<thead>
						<tr>
							<tr>
								<th>名称</th>
								<th>值</th>
								<th>操作</th>
							</tr>
						</tr>
					</thead>
				</table>
				</div>
			</div>
		</div>
	</div>
</div>

<link rel="stylesheet" href="plugins/ztree/metroStyle/metroStyle.css">
<script src="plugins/ztree/jquery.ztree.core.min.js"></script>
<script src="plugins/ztree/jquery.ztree.exedit.min.js"></script>

<script type="text/javascript">
var ajax_tab;
var nowTreeId ;

$(function() {


    /*****ztree*****/
    var setting = {
        view: {
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom,
            selectedMulti: false
        },
        edit: {
            enable: true,
            editNameSelectAll: true,
            showRemoveBtn: showRemoveBtn,
            showRenameBtn: showRenameBtn
        },
        data: {
            simpleData: {
                enable: true
            }
        },

        callback: {
            onExpand:onExpand,
            onMouseDown: onMouseDown,
            onRemove: onRemove,
            onRename:onRename
        }
    };

    var zNodes =[
	<#list list as o>
        { "id":${o.id},"open":true, "pId":1, "name":"${o.name}"},
	</#list>
    ];

    function onExpand(event, treeId, treeNode) {
    }

    function onMouseDown(event, treeId, treeNode) {
        if(treeNode != null){
            nowTreeId = treeNode.id;
            var param = {"classId" : nowTreeId};
            ajax_tab.settings()[0].ajax.data = param;
            ajax_tab.ajax.reload();

            $("#addUrl").attr("href","/admin/dict/detailadd?classId="+nowTreeId);
        }
    }

    function addHoverDom(treeId, treeNode) {
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                + "' title='add node' onfocus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_"+treeNode.tId);
        if (btn) btn.bind("click", function(){
            var zTree = $.fn.zTree.getZTreeObj("ztree");

			$.post("/admin/dict/save","name=新分类",function (result) {
                zTree.addNodes(treeNode, {id:result.id, pId:treeNode.id, name:result.name});
            })

            return false;
        });
    }

    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_"+treeNode.tId).unbind().remove();
    }

    function showRemoveBtn(treeId, treeNode) {
        if (treeNode.id != 1) return true;
    }
    function showRenameBtn(treeId, treeNode) {
		if (treeNode.id != 1)
        return true;
    }

	function onRemove(event, treeId, treeNode) {
        $.post("/admin/dict/delete","id="+treeNode.id,function (result) {
        })
    }

	function onRename(event, treeId, treeNode, isCancel) {
		if (treeNode.name.trim() == '' ){
			alertMsg("分类名称不能为空","warning")
			return false;
		}
		var params = {
			id:treeNode.id,
			name:treeNode.name
		};
        $.post("/admin/dict/save",params,function (result) {
        })
    }

    $("#addUrl").on('click',function () {
        var href = $("#addUrl").attr("href");
        if (href == 'javascript:;'){
            alertMsg("请选择分类目录","warning");
            return false;
        }
    })


	//初始化树
    $.fn.zTree.init($("#ztree"), setting, zNodes);

	//初始化表格
    ajax_tab = $('#tb_tab').DataTable({
        "dom":'itflp',
        "processing":true,
        "searching":false,
        "bInfo":false,
        "bServerSide":true,
        "paging":true,
        "bSort":false,
        "language":{"url":"plugins/datatables/language.json"},
        "ajax":{"url":"/admin/dict/page","type":"post"},
        "columns":[
            {"data":"name"},
            {"data":"value"},
            {"data":null}
        ],
        "columnDefs":[
            {
                "targets" : -1,
                "data" : null,
                "render" : function(data) {
                var btn ='<@shiro.hasPermission name="dict:edit">'
						+'<a class="btn btn-xs btn-info"  target="modal"  modal="lg" href="/admin/dict/detailedit?id='+ data.id+'">修改</a>&nbsp;'
						+'</@shiro.hasPermission>'
						+'<@shiro.hasPermission name="dict:delete">'
						+'<a class="btn btn-xs btn-default " callback="tbReload();" data-body="确认要删除吗？" target="ajaxTodo" href="/admin/dict/detaildelete?id='+ data.id +'">删除</a>';
								+'</@shiro.hasPermission>'
                    return btn;
                }
            } ]
    }).on('xhr.dt', function ( e, settings, data ,xhr) {
        dataTableMsg(data,xhr);
    } );
});

function tbReload(){
    var param = {"classId" : nowTreeId};
    ajax_tab.settings()[0].ajax.data = param;
    ajax_tab.ajax.reload();
}

</script>